<template>
  <div>
    <div id="manger-top" style="text-align: center;">
      <el-button @click="logout()" round style="position:absolute; right:3px;">退出</el-button>
      <el-button @click="OpenchangePasswordPage()" round style="position:absolute; right: 100px;">修改密码</el-button>
      <span style="position:absolute; right: 250px;">欢迎你:<span>{{user.username}}</span> </span>

      <el-dialog title="修改密码" :visible.sync="dialogVisible" @close="clearDialogMsg" width="30%">
        <el-form :model="fuleForm02" status-icon :rules="rules" ref="fuleForm02" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="旧密码">
            <el-input type="password" v-model="fuleForm02.oldpass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="fuleForm02.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input type="password" v-model="fuleForm02.checkPass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changePassword()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div id="manger-left">
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <menuslist :menusvalue="menusvalue"></menuslist>
      </el-menu>
    </div>
    <div id="manger-right" style="padding: 10px;">
      <router-view />
    </div>
  </div>
</template>

<script>
  import Menus from '@/components/Menus'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        user: {},
        menusvalue: [],
        dialogVisible: false,
        fuleForm02: {
          oldpass: "",
          pass: "",
          checkPass: "",
          userId: "",
        },
        rules: {
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      clearDialogMsg() {
        this.fuleForm02.oldpass = this.fuleForm02.pass = this.fuleForm02.checkPass = null;
      },
      changePassword() {
        this.fuleForm02.userId = this.user.userId;
        this.$http.post("issueUser/changPassword", this.fuleForm02).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg)
          } else {
            this.$message.error(resp.data.msg)
          }
          this.dialogVisible = false;
        })
      },
      OpenchangePasswordPage() {
        this.dialogVisible = true;
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      logout() {
        this.$http.post("/logout").then(resp => {})
      },
      getMenus() {
        this.$http.get("/issueMenus/getmenus", {
          params: {
            "roleId": this.user.roleId
          }
        }).then(resp => {
          this.menusvalue = resp.data.data;
          console.log(this.menusvalue);
        })
      }
    },
    created() {
      this.user = JSON.parse(localStorage.getItem("com.woniu.loginUser"));
      this.getMenus();
    },
    components: {
      menuslist: Menus
    }
  }
</script>

<style>
  #manger-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-color: #55ff00;
  }

  #manger-left {
    position: absolute;
    top: 70px;
    left: 0;
    width: 250px;
    bottom: 0;
  }

  #manger-right {
    position: absolute;
    top: 70px;
    left: 200px;
    right: 0;
    bottom: 0;
    background-color: #ffff7f;
  }
</style>
